<style>
    .textdiff span {
        color: gray;
    }
    .matrix-lable-left {
        text-align-last: left
    }
    .server-content {
        padding: 20px 35px;
    }
    .server-content .row {
        margin-bottom: 10px;
    }
    .server-content .row .col-sm-12 {
        line-height: 32px;
    }
    .server-content .fa-size {
        font-size: 18px;
        color: #23b7e5;
    }
    .server-content .fa-spinner {
        color: #777;
        font-size: 30px;
    }
    .server-content .i-switch {
        margin-top: 5px;
    }
    .server-content .row .col-sm-12 .btn-area {
        width: 110px;
    }
    .server-content .btn-test {
        float: right;
    }
    .textdiff span {
        color: gray;
    }
    .match{
        color: gray;
    }
    .ins{
        color: black;
        background: #bbffbb;
    }
    .del{
        color: black;
        background: #ffbbbb;
    }
    .server-content .form-textarea {
        width: 100%;
        margin-top: -31px;
    }
</style>
<div class="wrapper-md server-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域：</label>
                <div class="col-sm-4">
                    <div class="btn-group">
                        <label class="btn btn-sm btn-default btn-area" ng-model="info.sltAreaName" ng-repeat="area in info.areaList" btn-radio="'{{area.areaName}}'" ng-click="switchArea(area)"><i class="fa fa-check text-active"></i> {{area.crtname}}</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">工&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;程：</label>
                <div class="col-sm-4">
                    <m-ui-select prompt="请选择工程..."
                                 itme-list="info.programeList"
                                 selected-item="info.sltProgrameItem"
                                 select-item-fun="selectProgrameFun(item)">
                    </m-ui-select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">接口名称：</label>
                <div class="col-sm-4">
                    <div ng-if="info.showApiLoading">
                        <i class="fa fa-spinner fa-spin fa-2x"></i>
                    </div>
                    <m-ui-select ng-if="!info.showApiLoading"
                                 prompt="请选择接口..."
                                 itme-list="info.apiList"
                                 selected-item="info.sltApiItem"
                                 select-item-fun="selectApiFun(item)"
                                 has-other-value="true"
                                 has-other-value-title="描述：">
                    </m-ui-select>
                </div>
                <div class="col-sm-5">
                    <b>{{info.sltApiItem.path || ""}}</b>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">方&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;法：</label>
                <div class="col-sm-4">
                    <div ng-if="info.showMethodLoading">
                        <i class="fa fa-spinner fa-spin fa-2x"></i>
                    </div>
                    <m-ui-select ng-if="!info.showMethodLoading"
                                 prompt="请选择方法..."
                                 itme-list="info.methodList"
                                 selected-item="info.sltMethodItem"
                                 select-item-fun="selectMethodFun(item)"
                                 has-other-value="true"
                                 has-other-value-title="描述：">
                    </m-ui-select>
                </div>
                <div class="col-sm-5">
                    <b>{{info.sltMethodItem.name || ""}}</b>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">版&nbsp;&nbsp;&nbsp;本&nbsp;&nbsp;&nbsp;号：</label>
                <div class="col-sm-4">
                    <m-ui-select prompt="请选择版本号..."
                                 itme-list="info.versionList"
                                 selected-item="info.sltVersionItem">
                    </m-ui-select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">参&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：</label>
                <div class="col-sm-4">
                    <div ng-if="info.showParamLoading">
                        <i class="fa fa-spinner fa-spin fa-2x"></i>
                    </div>
                    <m-ui-select ng-if="!info.showParamLoading"
                                 prompt="请选择参数种类..."
                                 itme-list="info.paramsList"
                                 selected-item="info.sltParamItem"
                                 select-item-fun="selectParamFun(item)">
                    </m-ui-select>
                </div>
                <div class="col-sm-5">
                    <i popover="请选择可选的参数，该参数集合由测试用例维护！" popover-trigger="mouseenter" class="fa fa-question-circle fa-size"></i>
                    <button class="btn btn-default" ng-click="addParamItem()">添加参数</button>
                    <button class="btn btn-default" ng-click="updateParamItem()" ng-disabled="info.updateBtnDisabled">修改参数</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">输入/输出：</label>
                <div class="col-sm-8">
                    <tabset>
                        <tab ng-repeat="tab in info.tabList"
                             heading="{{tab.name}}"
                             active="tab.active"
                             ng-click="tabClick(tab)">
                        </tab>
                        <m-single-switch show-label="切换成JSON"
                                         behind-label="切换成文本"
                                         default-status="info.isShowJson"
                                         switch-change-fun="switchChange(status)">
                        </m-single-switch>
                        <button class="btn btn-xs btn-success btn-test" ng-click="testClick()">调试</button>
                    </tabset>
                    <!-- 显示输入或者输出 -->
                    <div class="jsonView" ng-if="!info.isDiff">
                        <div ng-if="!info.isText">
                            <json ng-if="info.updateJson"
                                  child="info.jsonData" 
                                  default-collapsed="false" 
                                  change-keys=""
                                  custom-types="" 
                                  type="object">
                            </json>
                        </div>
                    </div>
                    <div ng-if="info.isText">
                        <textarea id="jsonTextarea" class="form-control form-textarea" style="width: 100%;" ng-model="info.jsonString"></textarea>
                    </div>
                    <!-- 显示对比 -->
                    <div ng-if="info.isDiff">
                        <div class="col-sm-6">
                            <span>期望输出：</span>
                            <pre>{{info.leftObj}}</pre>
                        </div>
                        <div class="col-sm-6">
                            <span>实际输出：</span>
                            <pre class='textdiff' line-diff left-obj='info.leftObj' right-obj='info.rightObj'></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




